<template>
  <div class="InfoHeader" v-if="userdata != null">
    <i class="left iconfont icon-left" @click="gopath"> </i>
    <div class="center">
      {{ userdata.username }}
    </div>
    <i class="left iconfont icon-mulu" @click="loginout"> </i>
  </div>
</template>

<script>
import { LoginOut } from "@/api/data";
export default {
  props: {
    userdata: {
      type: Object,
      default: null,
    },
  },
  methods: {
    // 返回上一页
    gopath() {
      this.$router.go(-1);
    },

    // 退出登陆
    async loginout() {
      this.$socket.emit("loginout", { _id: this.$store.state.userdata._id });
      this.$socket.on("loginout", (data) => {
        if (data.code == 200) {
          sessionStorage.removeItem("userdata");
          this.$store.commit("removeuserdata");
          this.$router.replace("/register");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.InfoHeader {
  height: 50px;
  width: 100vw;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  .left,
  .right {
    font-size: 20px;
  }
  .center {
    flex: 1;
    padding-left: 10px;
    font-size: 16px;
  }
}
</style>